<template>
  <div class="tabsBox">
  <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-change="handleClick">
    <el-tab-pane label="水厂" name="first" class="tab">
      <template #label>
        <img class="tabImg" :src="isIcon?pathUrl+'/icon/tabSc@2x.png':pathUrl+'/icon/tabScXz@2x.png'" alt="">
         水厂
      </template>
      <div v-for="(item, index) in arrayList" :key="index" class="mapListBox" @click="pipeBut(item)">
        <div class="mapList">
          <div>
          <img class="tabImg" src="/public/icon/水厂.png" alt="">
          </div>
          <div class="tabTitle">
            <span
              class="tabName"> {{ item.name }}
            </span>
            <span class="tabAddress">
              地址：<span class="names">{{ item.address }}</span>
            </span>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="管网" name="second" class="tab">
      <template #label>
        <img class="tabImg" :src="isIcon2?pathUrl+'/icon/tabGx@2x.png':pathUrl+'/icon/tabGxXz@2x.png'" alt="">
         管网
      </template>
      <div v-for="(item, index) in dataPoints1" :key="index" @click="pipeBut(item)" class="mapListBox">
        <div class="mapList">
          <div>
          <img class="tabImg" src="/public/icon/流量监测点.png" alt="">
          </div>
          <div class="tabTitle">
            <span
              class="tabName"> {{ item.name }}
            </span>
            <span class="tabAddress">
              地址：<span class="names">{{ item.address }}</span>
            </span>
          </div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="原水" name="three" class="tab">
      <template #label>
        <img class="tabImg" :src="isIcon3?pathUrl+'/icon/tabYs@2x.png':pathUrl+'/icon/tabYsXz@2x.png'" alt="">
         原水
      </template>
      <div v-for="(item, index) in dataPoints2" :key="index" @click="pipeBut(item)" class="mapListBox">
        <div class="mapList">
          <div>
          <img class="tabImg" src="/public/icon/水源地_水库.png" alt="">
          </div>
          <div class="tabTitle">
            <span
              class="tabName"> {{ item.name }}
            </span>
            <span class="tabAddress">
              地址：<span class="names">{{ item.address }}</span>
            </span>
          </div>
        </div>
      </div>
    </el-tab-pane>
  </el-tabs>
</div>
  <!-- <bubblePopUp></bubblePopUp> -->
</template>

<script setup>
import { ref ,onMounted} from 'vue'
import DyBubble from '../../components/DyBubble.vue'
// import { TabsPaneContext } from 'element-plus'
import {
  flyToByGeom,OverLayer,
  clearHighlights2,IncreaseWater,IncreaseWater2,IncreaseWater1,
  clearHighlights1
} from '../../tools/highlight-feature'
import bus from '../../tools/eventBus'
import { dataSource } from '../../components/List/advancedAllList'
import {proj4Epsg} from '../../tools/proj4_EPSG'
import {water_source_data} from '../../components/List/water_source'
import bubblePopUp from '../../components/bubblePop/bubblePop-up.vue'

const isIcon=ref(true)
const isIcon1=ref(true)
const isIcon2=ref(true)
const isIcon3=ref(true)
const activeName = ref('first')
const activeType = ref(true)
const arrayList =ref([]);
const dataPoints1 =ref([]);
const dataPoints2 = ref([]);

// 获取当前文件地址
const pathName = window.document.location.pathname;
const pathUrl = pathName.substring(0, pathName.lastIndexOf('/'));
// 点位定位
function pipeBut(item){
  console.log(item,'ssssssss');
  if(item.dataType=='flowmeasure'  || item.dataType=='pressuretap' || item.dataType=='waterparticle'){
    flyToByGeom([item.x,item.y])
  }else{
    const geom= proj4Epsg([item.x,item.y])
    flyToByGeom(geom)
  }
 
  
}

onMounted(()=>{
  // initialization()
})


IncreaseData()

// 初始化点位/气泡
// function initialization(){
//   OverLayer(arrayList.value)
//   OverLayer(dataPoints1.value)
//   OverLayer(dataPoints2.value)
// }

function handleClick (type) {
  // 清除上一次气泡
  // cleanBubble()
  // if(type=='first'){// 水厂
  //   OverLayer(arrayList.value)
  // }
  // else if(type=='second'){//管网
  //   OverLayer(dataPoints1.value)
  // }else{//three原水
  //   OverLayer(dataPoints2.value)
  // }
}

async function IncreaseData() {
  // 水厂数据
  arrayList.value = await dataSource({
    currPage: 1,
    geom: null,
    pageSize: 20,
    conditions: {
      waterworks: null
    }
  });
  // 管网数据
  dataPoints1.value = await dataSource({
    geom: null,
    conditions: {
      waterparticle: null,
      pressuretap: null,
      flowmeasure: null
    }
  });
  dataPoints1.value=dataPoints1.value.filter(item => item.archiveid !== null && item.archiveid !== '');
  // 水库数据
  dataPoints2.value= await dataSource({
  "geom": null,
  "conditions": {
    "source": null
  }
  });
}

/** 
 * 气泡切换-显隐 type类型
 * clearHighlights()清除图层
 * IncreaseWater()创建图层
 * cleanBubble()清除气泡
 * 水厂默认触发
*/
// function imgIcon(type){
//   if(type=='waterworks'){ // 水厂
//      isIcon.value=!isIcon.value
//     if(isIcon.value){
//       OverLayer(arrayList.value)
//       // console.log(arrayList.value,'走了么sss');
//       // 水厂数据源
//       // IncreaseWaterFn()
//       IncreaseWater(arrayList.value)
//     }
//     else{
//       clearHighlights()
//       cleanBubble()
//     //  if(isIcon2.value) OverLayer(dataPoints1.value)
//     //  if(isIcon3.value) OverLayer(dataPoints2.value)
//     }
//   }
//   else if(type=='pipenetwork'){// 管网
//     isIcon2.value=!isIcon2.value
//     console.log(isIcon2.value,'isIcon2.value');
//     if(!isIcon2.value){
//       OverLayer(dataPoints1.value)
//       IncreaseWater1(dataPoints1.value)
//     }else{
//       clearHighlights1()
//       cleanBubble()
//     //  if(isIcon.value) OverLayer(arrayList.value)
//     //  if(isIcon3.value) OverLayer(dataPoints2.value)
//     }
//   }
//   else{// 原水
//     isIcon3.value=!isIcon3.value
//     if(!isIcon3.value){
//     OverLayer(dataPoints2.value)
//     IncreaseWater2(dataPoints2.value)
//     }
//     else{
//       clearHighlights2()
//       cleanBubble()
//     //  if(isIcon.value) OverLayer(arrayList.value)
//     //  if(isIcon2.value) OverLayer(dataPoints1.value)
//     }
//   }
// }

/** 
 * 图标方法选中效果
*/
function IconFn(){
  
}

</script>

<style scoped lang="scss">
.tabsBox{
  background-image: linear-gradient(159deg, rgba(253,254,255,0.96) 21%, rgba(247,250,254,0.86) 100%);
  box-shadow: 0px 2px 8px 0px rgba(10,35,59,0.1);
  border-radius: 12px;
}

.tabImg1{
  width: 45px;
  height: 45px;
}

.tab {
  height: 430px;
  overflow-y: scroll;
  place-items: center;
} 
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__item{
  /* opacity: 0.6 !important;
  background: rgba(255,255,255,0.90) !important;
  box-shadow: 0px 4px 18px 0px rgba(2,75,193,0.2) !important;
  border-radius: 8px !important; */
  border:none;
  width: 83px;
  height: 32px;
  margin: 3px 6px;
}
::v-deep .el-tabs__nav-scroll{
  background: #EFF5FF;
  border-radius: 8px;
  width: 288px;
  height: 40px;
  margin: 0px 16px;
  line-height: 40px;
}
::v-deep .is-active{
  width: 94px;
  height: 32px;
  background: rgba(255,255,255,0.90);
  box-shadow: 0px 4px 18px 0px rgba(2,75,193,0.2);
  border-radius: 8px;
  margin-top:4px;
}
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav{
  width: 288px;
}

::v-deep .el-tabs__header {
  margin: 20px 0 10px 0px;
}
.tabImg{
    width: 16px;
    height: 16px;
    margin: 7px 12px 7px 0;
  }
.mapListBox {
  border-radius: 10px;
  margin: 5px;
  width: 300px;
}
  .mapList{
    display: flex;
    margin: 29px 10px;
    .tabImg{
    width: 26px;
    height: 26px;
    margin: 7px 12px 7px 0;
  }
  .tabTitle{
    display: flex;
    flex-direction: column;
  }
  .tabAddress{
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #999999;
    line-height: 18px;
    font-weight: 400;
  }
  .tabName{
    font-family: PingFangSC-Regular;
    font-size: 14px;
    color: #1A1A1A;
    font-weight: 400;
  }
}
/* .tabImg{
  width: 40px;
  height: 40px;
}
.tabImg1{
  width: 45px;
  height: 45px;
}
.tabImg2{
  width: 45px;
  height: 45px;
}
.tabImg3{
  width: 45px;
  height: 45px;
}
::v-deep.demo-tabs>.el-tabs__content {
  background-image: linear-gradient(159deg, rgba(253,254,255,0.96) 21%, rgba(247,250,254,0.86) 100%);
  box-shadow: 0px 2px 8px 0px 
}
::v-deep.el-tabs--card>.el-tabs__header .el-tabs__nav, .el-tabs__nav-scroll{
  width: 322px;
  background-color: rgba(255, 255, 255, 0.9);
}
.names {
  font-family: PingFangSC-Regular;
  font-size: 13px;
  color: #5a5e66;
  text-align: left;
  line-height: 13px;
  font-weight: 400;
  margin-bottom: 2px;
}

.name {
  font-weight: 600;
  color: #5a5e66;
  text-align: left;
  line-height: 13px;
  font-weight: 400;
  margin-bottom: 2px;
}

.mapListBox {
  border-radius: 10px;
  margin: 5px;
  border: 1px solid #e8ebf2;
  width: 300px;
}

.tab {
  height: 500px;
  overflow-y: scroll;
  place-items: center;
} 

.tab::-webkit-scrollbar {
  width: 12px;
}

.tab::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.tab::-webkit-scrollbar-thumb {
  border-radius: 10px;
  border: 3px solid #d8dce6;
}

.tab::-webkit-scrollbar-thumb:hover {
  background: #cbe4ff;
}

.el-tabs--card>.el-tabs__header .el-tabs__nav,
.el-tabs__nav-scroll {
  background-color: rgba(255, 255, 255, 0.9);
}

::v-deep .el-tabs__header {
  margin: 0;
}

.titles {
  font-family: PingFangSC-Regular;
  font-size: 13px;
  color: #5a5e66;
  text-align: left;
  line-height: 13px;
  font-weight: 400;
  margin-bottom: 2px;
} */

</style>
